const { PureComponent } = require("react");

// function foo(WraperComponent) {
//   class NewComponent extends PureComponent {
//     render() {
//       return (
//         <div>
//           <header>头部</header>
//           <WraperComponent></WraperComponent>
//           <footer>底部</footer>
//         </div>
//       )
//     }
//   }
//   return NewComponent;
// }


// function foo(WraperComponent) {
//   // 直接return一个组件，组件名中可以不用写的
//   return class extends PureComponent {
//     render() {
//       return (
//         <div>
//           <header>头部</header>
//           <WraperComponent></WraperComponent>
//           <footer>底部</footer>
//         </div>
//       )
//     }
//   }
// }


// function foo(WraperComponent) {
//   return props => (
//     <div>
//       <header>头部</header>
//       <WraperComponent></WraperComponent>
//       <footer>底部</footer>
//     </div>
//   )
// }

// 调用 foo([1,2]) 得到fn函数 是一个高阶函数，高阶组件，纯函数
// foo([1,2])(DemoA)
function foo(arr) {
  return function fn(WraperComponent) {
    return props => (
      <div>
        <header>头部</header>
        <WraperComponent></WraperComponent>
        <footer>底部</footer>
      </div>
    )
  }
}


// 可以使用ES6中的装饰器   @foo复用foo高阶组件装饰DemoA
@foo
class DemoA extends PureComponent {
  render() {
    return (
      <div>
        <h1>类组件</h1>
      </div>
    )
  }
}

export default DemoA;